<template>
    <div :id="'p'+times" ref="canvas" class="canvas" :style="{width: '100%', height: canHeight + 'px'}"></div>
</template>
<script setup lang="ts">
import { defineProps, computed, onMounted } from 'vue'
import * as echarts from 'echarts/core';
import { GaugeChart, type GaugeSeriesOption } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent, type TooltipComponentOption,
    LegendComponent, type LegendComponentOption,
    GridComponent, type GridComponentOption } from 'echarts/components';
echarts.use([GaugeChart,TooltipComponent,LegendComponent,GridComponent, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<
  GridComponentOption | GaugeSeriesOption | LegendComponentOption | TooltipComponentOption
>;
const props = defineProps({
    canvasHeight: {
        type:Number,
        default: 300
    },
    data: {
        type: Object,
        default: () => { } 
    }
})
let canHeight = computed(() => { return props.canvasHeight })
const times = new Date().getTime()
onMounted(() => {
    var chartDom = document.getElementById('p'+times);
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    const gaugeData = [
    {
        value: 20,
        name: 'Good',
        title: {
        offsetCenter: ['-60%', '80%']
        },
        detail: {
        offsetCenter: ['-60%', '105%']
        }
    },
    {
        value: 40,
        name: 'Better',
        title: {
        offsetCenter: ['0%', '80%']
        },
        detail: {
        offsetCenter: ['0%', '105%']
        }
    },
    {
        value: 60,
        name: 'Perfect',
        title: {
        offsetCenter: ['60%', '80%']
        },
        detail: {
        offsetCenter: ['60%', '105%']
        }
    }
    ];
    option = {
        grid: {
            top: 15,
            left: 0,
            right: 0,
            bottom: 15,
            containLabel: true
        },
        series: [
            {
            type: 'gauge',
            anchor: {
                show: true,
                showAbove: true,
                size: 18,
                itemStyle: {
                color: '#FAC858'
                }
            },
            pointer: {
                icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                width: 4,
                length: '80%',
                offsetCenter: [0, '8%']
            },
            progress: {
                show: true,
                overlap: true,
                roundCap: true
            },
            axisLine: {
                roundCap: true
            },
            data: gaugeData,
            title: {
                show: true,
                fontSize: 12,
                color: '#fff',
            },
            detail: {
                width: 20,
                height: 12,
                fontSize: 12,
                color: '#fff',
                backgroundColor: 'inherit',
                borderRadius: 3,
                formatter: '{value}%'
            }
            }
        ]
    };
    // setInterval(function () {
    // gaugeData[0].value = +(Math.random() * 100).toFixed(2);
    // gaugeData[1].value = +(Math.random() * 100).toFixed(2);
    // gaugeData[2].value = +(Math.random() * 100).toFixed(2);
    // myChart.setOption({
    //     series: [
    //     {
    //         data: gaugeData
    //     }
    //     ]
    // });
    // }, 2000);

    option && myChart.setOption(option);
})
</script>

<style scope>
</style>